<template>
  <div class="recommend-page page">
    <div class="title-group">
      <i class="iconfont iconfont-fanhui" @click="handleBack"></i>
      <span>相似文献推荐</span>
    </div>
    <div class="page-content">
      <div class="option-row">
        <i class="iconfont iconfont-fanhui" @click="handleHideDetail" v-if="detailId"></i>
        <van-button type="primary" size="small" @click="handleChangeDataList" v-else>换一换</van-button>
        <img class="logo" src="../../assets/logo2.png"/>
      </div>
      <div class="data-content">
        <div class="data-list">
          <div class="data-item" v-for="item in dataList" :key="item.id" @click="handleShowDetail(item)">
            <p class="title">{{item.title}}</p>
            <div class="more-row">
              <span>{{item.authors}}</span>
              <span class="date">{{item.date}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-content" v-if="detailId">
        <article-detail :id="detailId" from="recommend" @backTop="handleBackTop" @recommend="handleRefreshRecommend"></article-detail>
      </div>
    </div>
  </div>
  <footer-menus></footer-menus>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Calendar, Field, Loading, showLoadingToast, showFailToast, Button as VanButton } from "vant";
import {useRouter, useRoute} from "vue-router";
import api from '../../api/index'
import common from "../../common/common";
import {HistoryPushItem} from "../../types";
import {formatTime, formatTime3, uuid} from "../../common/utils";
import ArticleDetail from "../../components/article-detail.vue";
import FooterMenus from '../../components/footer-menus.vue'

const router = useRouter()
const route = useRoute()

const uid = common.getLocalUid()
let id: string = (route.query.id || '') as string
let allDataList = []
const dataList = ref([])
const detailId = ref('')
let page = 1;
let totalPage = 0;
const pageSize = 10;
const setRecommendDataList = () => {
  dataList.value = []
  for(let i=(page-1)*pageSize; i<page*pageSize; i++) {
    if (allDataList[i]) {
      dataList.value.push(allDataList[i])
    }
  }
}
const getArticleRecommend = async () => {
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })
  dataList.value = []
  allDataList = []
  totalPage = 0
  page = 1
  try {
    const res = await api.articleRecommend({
      uid,
      id,
    })
    toast.close()
    if (res.sim_list && res.sim_list.length) {
      allDataList = res.sim_list
      totalPage = Math.ceil(allDataList.length/pageSize)
      setRecommendDataList()
    } else {
      showFailToast({
        message: '获取数据失败',
        forbidClick: true,
      })
    }
  } catch(e){
    console.log(e)
    toast.close()
    showFailToast({
      message: '服务异常',
      forbidClick: true,
    })
  }
}
const handleBack = () => {
  router.go(-1)
}
const handleChangeDataList = () => {
  if (page < totalPage) {
    page += 1
  } else {
    page = 1
  }
  setRecommendDataList()
}
const handleShowDetail = (item) => {
  detailId.value = item.id
}
const handleHideDetail = () => {
  detailId.value = ''
}
const handleBackTop = () => {
  document.querySelector('.detail-content').scrollTop = 0
}
const handleRefreshRecommend = (newId) => {
  handleHideDetail()
  id = newId
  getArticleRecommend()
}
getArticleRecommend()
</script>

<style scoped lang="less">
.recommend-page{
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-bottom: 52px;
  box-sizing: border-box;
  background: var(--van-primary-color);
}
.page-content{
  background: #fff;
}
.option-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  img{
    width: 105px;
    max-width: 105px;
  }
  .iconfont{
    font-size: 20px;
  }
}
.data-content,.detail-content{
  overflow-y: auto;
  position: relative;
  height: calc(100% - 178px);
  //scroll-behavior: smooth;
}
.data-item{
  position: relative;
  padding: 20px 0;
  &+.data-item{
    border-top: 1px solid #BDCDFF;
  }
  .title{
    margin-bottom: 10px;
  }
  .more-row{
    color: #7C7C7C;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .date{
      width: 100px;
      min-width: 100px;
      text-align: right;
    }
  }
}
.detail-content{
  position: absolute;
  top:64px;
  left:0;
  width: 100%;
  padding: 0px 20px 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 1;
}
</style>
